<!--
 * @Descripttion: 
 * @version: 
 * @Author: weihua.yao
 * @Date: 2021-04-14 23:49:05
 * @LastEditTime: 2021-04-14 23:59:31
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g6/3.7.1/dist/g6.min.js"></script>
  </script>
  </script>
</head>

<body>
  <div id="g6-chart"></div>
</body>
<script>
  const data = {
    // 点集
    nodes: [{
        id: 'node1', // String，该节点存在则必须，节点的唯一标识
        x: 100, // Number，可选，节点位置的 x 值
        y: 200, // Number，可选，节点位置的 y 值
        label: '起始点', // 节点文本
        size: 60, // 元素的尺寸
        labelCfg: { // 标签配置属性
          position: 'center', // 标签的属性，标签在元素中的位置
          style: { // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
            fontSize: 12, // 标签的文字大小
            fill: '#ffffff', // 标签的文字颜色
          }
        },
        style: { // 包裹样式属性的字段 style 与其他属性在数据结构上并行
          fill: '#ff0000', // 样式属性，元素的填充色
          stroke: '#888', // 样式属性，元素的描边色
          lineWidth: 1, // 节点描边粗细
        }
      },
      {
        id: 'node2', // String，该节点存在则必须，节点的唯一标识
        x: 510, // Number，可选，节点位置的 x 值
        y: 100, // Number，可选，节点位置的 y 值
        label: '目标点1', // 节点文本
        size: 10, // 元素的尺寸
        labelCfg: { // 标签配置属性
          position: 'center', // 标签的属性，标签在元素中的位置
          style: { // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
            fontSize: 12, // 标签的文字大小
            fill: '#ffffff', // 标签的文字颜色
          }
        },
        style: { // 包裹样式属性的字段 style 与其他属性在数据结构上并行
          fill: '#333', // 样式属性，元素的填充色
          stroke: '#ccc', // 样式属性，元素的描边色
          lineWidth: 2, // 节点描边粗细
        }
      },
      {
        id: 'node3', // String，该节点存在则必须，节点的唯一标识
        x: 510, // Number，可选，节点位置的 x 值
        y: 300, // Number，可选，节点位置的 y 值
        label: '目标点2', // 节点文本
        size: 100, // 元素的尺寸
        labelCfg: { // 标签配置属性
          position: 'center', // 标签的属性，标签在元素中的位置
          style: { // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行
            fontSize: 12, // 标签的文字大小
            fill: '#ffffff', // 标签的文字颜色
          }
        },
        style: { // 包裹样式属性的字段 style 与其他属性在数据结构上并行
          fill: 'green', // 样式属性，元素的填充色
          stroke: '#ccc', // 样式属性，元素的描边色
          lineWidth: 2, // 节点描边粗细
        }
      }
    ], // 边集
    edges: [{
        source: 'node1', // String，必须，起始点 id
        target: 'node2', // String，必须，目标点 id
        label: '连接线1', // 边的文本
      },
      {
        source: 'node2', // String，必须，起始点 id
        target: 'node3', // String，必须，目标点 id
        label: '连接线2', // 边的文本
      },
    ],
  }
  const graph = new G6.Graph({
    container: 'g6-chart',
    width: 800,
    height: 500,
  });
  graph.data(data),
  graph.render()
</script>

</html>